<template>
    <div class="nest">
        <h1>这是第四层BBBB</h1>
        <button @click="changeFlag">change</button>
        <div>
            {{data}}
        </div>
    </div>
</template>

<script setup lang="ts">
import {inject, Ref, ref} from 'vue'

// let data = inject('flag')      // 这个没有第二个参数，返回的data是一个unkoown,所以下面赋值会报警告错误

let data = inject<Ref<boolean>>('flag', ref(false))  // 第二个参数，需要给一个默认值，也可以是函数形式； 这个泛型作类型推断时需要Ref辅助

const changeFlag = () => {
    data.value = true
}
</script>

<style scoped>
.nest {
    width: 150px;
    height: 150px;
    padding: 10px;
    background-color: gainsboro;
    color: white;
}
</style>